<!DOCTYPE html>
<html lang="en">
<head>
  <title>Cesium Gradient Box Example</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
  <style>
    @import url(https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');

    var geometry = new Cesium.BoxGeometry({
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
      maximum: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
      minimum: new Cesium.Cartesian3(-200000.0, -200000.0, -200000.0),
    });

    var instance = new Cesium.GeometryInstance({
      geometry: geometry,
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
      }
    });

    viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: instance,
        appearance: new Cesium.PerInstanceColorAppearance({
          closed: true,
          translucent: false,
          vertexShaderSource: `
            attribute vec4 position3DHigh;
            attribute vec4 position3DLow;
            attribute vec3 normal;
            attribute vec4 st;
            attribute vec4 color;
            varying vec4 v_color;
            void main() {
              vec4 p = czm_computePosition();
              v_color = czm_octDecode(vec2(normal.x, normal.y));
              v_color = vec4(mix(color.rgb, vec3(0.0, 0.0, 1.0), (p.z+200000.0)/400000.0), color.a);
              gl_Position = czm_modelViewProjectionRelativeToEye * p;
            }`,
          fragmentShaderSource: `
            varying vec4 v_color;
            void main() {
              gl_FragColor = czm_gammaCorrect(v_color);
            }`
        })
      })
    );

    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  </script>
</body>
</html>
